{% extends './common/base.html' %} {% block body %}




<div class="mt10 ml10 fb bl3 f14 pl10 tl pr10">
    <h3>{{project.system_name}}<small class="ml10">基础路径：{{project.system_url}}</small></h3>
</div>
<hr>

<div class="row">
    <div class="alert alert-info ml15" style="width:97%">
        备注:请认真填写相关参数，此项目名为：
        <span class="alert-link">{{project.system_name}}</span>，因此只能添加此项目下的相关接口
    </div>
    <div class="col-md-3">
        <div class="alert alert-success" role="alert">
            接口目录
        </div>
        {% if (result.length)%} {% for item in result %}
        <div class="menu-list">
            <h4>
                <i class="glyphicon glyphicon-bookmark"></i>{{item.group_name}}</h4>
            <ul class="ulmenu1">
                {% for child in item.children %}
                <li>
                    <a class="selected" href="javascript:;" @click="clickMethods('{{child.api_id}}')">{{child.api_name}}</a>
                </li>
                {% endfor %}

            </ul>
        </div>
        {% endfor %} {% else %}

        <div class="alert alert-info" style="width:100%">
            还没有创建相关接口项目！请从右侧添加
        </div>

        {% endif %}
    </div>
    <div class="col-md-9">
        <div class="alert alert-success" role="alert">
            请添加该项目下的接口分类,
            <a href="javascript:;" class="alert-link" @click="addTypeApi">立即添加</a>
        </div>
        <form>
            <div class="form-group">
                <label for="api_name">接口名称</label>
                <input type="text" class="form-control" v-model="api_name" id="api_name" placeholder="接口名称">
            </div>
            <div class="form-group">
                <label for="api_path">基础路径</label>
                <input type="text" class="form-control" v-model="api_path" id="api_path" placeholder="基础路径如：http://, https://">
            </div>


            <div class="form-group">
                <label for="api_method">接口方法</label>
                <input type="text" class="form-control" v-model="api_method" id="api_method" placeholder="接口方法">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">所属接口分类</label>
                <select class="form-control" v-model="group_id">
                    <option value="defaultgroup">请选择</option>
                    <option v-for="item of groupList" :value="item.group_id" :key="item.group_id">
                        ${item.group_name}
                    </option>

                </select>
            </div>

            <div class="form-group">
                <label for="api_params">接口参数</label>
                <table class="table table-bordered" id="params-table">
                    <thead>
                        <tr class="fb">
                            <th class="p5" style="width:30%">
                                字段名称
                            </th>
                            <th class="p5">
                                是否为空
                            </th>
                            <th class="p5">
                                字段说明
                            </th>
                            <th class="p5">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody>

                        <template v-for="(item,index) of paramsList">
                            <tr class="last">
                                <td>
                                    <input type="text" class="form-control" v-model="item.param_key" placeholder="输入字段名称">
                                </td>
                                <td class="pl10">
                                    <select class="form-control" id="method" v-model="item.param_null">
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                </td>
                                <td class="pl10">
                                    <input type="text" class="form-control" v-model="item.param_desc" placeholder="输入字段描述">
                                </td>
                                <td class="pl10">
                                    <a href="javascript:;">
                                        <i class="glyphicon glyphicon-trash" @click="deleteApiParams(index,item)"></i>
                                    </a>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
                <div class=" mt10">
                    <button type="button" class="btn btn-success btn-sm" @click="addApiParams">添加参数</button>
                </div>

            </div>
            <div class="form-group">
                <label for="api_desc">接口介绍</label>
                <textarea name="" id="api_desc" class="form-control" v-model="api_desc" id="api_desc" rows="3" placeholder="接口介绍"></textarea>
            </div>


            <button v-if="!api_id" type="button" class="btn btn-primary" @click="submitMethods">提交</button>
            <div v-else>
                <button v-if="api_id" type="button" class="btn btn-primary" @click="updateMethods">修改</button>
                <button v-if="api_id" type="button" class="btn btn-primary" @click="deleteMethods">删除</button>
            </div>
        </form>
    </div>
</div>





<div class="modal fade" id="myDialog" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">分类操作</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">分类名称:</label>
                        <input type="text" class="form-control" v-model.trim="group_name" placeholder="项目名称">
                    </div>
                </form>
                <h5>分类列表</h5>
                <div class="group-list">
                    <div class="alert alert-info" v-for="(item,index) of groupList" :key="item.group_id" style="margin-bottom:5px">
                        <button type="button" class="close" @click="deleteGroupItem(item.group_id,index)">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>${item.group_name}</strong>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" @click="submitGroupMethods">保存</button>
            </div>
        </div>
    </div>
</div>

<br>
<br>

{% endblock %} {% block script %}
<script src="/static/js/admin_api.js"></script>


{% endblock %}